<template>
	<view class="authentication-car-owner">
		<xzfx-panel :showTitle="false" :isCard="true">
			<view slot="content">
				<view class="upload-panel">
					<view class="upload-panel-title">手持身份证人像面</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImageDriverId"></image>
					</view>
				</view>
				<view class="upload-panel">
					<view class="upload-panel-title">驾驶证主页</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImageDriverFront"></image>
					</view>
				</view>
				<view v-if="user.userInfo.truckImageDriverBack" class="upload-panel">
					<view class="upload-panel-title">驾驶证副页</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImageDriverBack"></image>
					</view>
				</view>
				<view class="upload-panel">
					<view class="upload-panel-title">行驶证主页</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImageDrivingFront"></image>
					</view>
				</view>
				<view v-if="user.userInfo.truckImageDrivingBack" class="upload-panel">
					<view class="upload-panel-title">行驶证副页</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImageDrivingBack"></image>
					</view>
				</view>
				<view class="upload-panel">
					<view class="upload-panel-title">车辆照片</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImages.split(',')[0]"></image>
					</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImages.split(',')[1]"></image>
					</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImages.split(',')[2]"></image>
					</view>
				</view>
				<view v-if="user.userInfo.truckImageService" class="upload-panel">
					<view class="upload-panel-title">营运证</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImageService"></image>
					</view>
				</view>
				<view v-if="user.userInfo.truckImageInsure" class="upload-panel">
					<view class="upload-panel-title">保险证明</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImageInsure"></image>
					</view>
				</view>
				<view v-if="user.userInfo.truckImageOther" class="upload-panel">
					<view class="upload-panel-title">其他证件</view>
					<view class="upload-panel-box">
						<view v-if="user.userInfo.truckAuthStatus === 1" class="upload-panel-state xzfx_icon_pass" style="color: #4cd964;"></view>
						<view v-if="user.userInfo.truckAuthStatus === 3" class="upload-panel-state xzfx_icon_in-review" style="color: #f0ad4e;"></view>
						<image class="upload-panel-image" :src="user.userInfo.truckImageOther"></image>
					</view>
				</view>
			</view>
		</xzfx-panel>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("userInfo")
			};
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff !important;
	}
	.authentication-car-owner{
		padding-bottom: 50rpx;
		.upload-panel{
			margin-top: 25rpx;
			.upload-panel-title{
				position: relative;
				color: #666666;
				font-size: 30rpx;
				padding-bottom: 15rpx;
				text{
					font-size: 28rpx;
					color: $xzfx-theme;
					padding-left: 5rpx;
				}
			}
			.upload-panel-box{
				position: relative;
				.upload-panel-state{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 200rpx;
					font-weight: 500;
				}
				.upload-panel-image{
					width: auto;
					height: 300rpx;
					display: block;
				}
			}
			.upload-panel-box:nth-child(3),
			.upload-panel-box:nth-child(4){
				margin-top: 20rpx;
			}
		}
		.upload-panel:first-child{
			margin-top: 0;
		}
	}
	
	/deep/ .xzfx-panel{
		margin: 0 !important;
	}

</style>